<template>
    <a-tabs v-model:activeKey="chooseTab" class="tabs" @change="handleClick">
        <a-tab-pane v-for="item in tabList" :key="item[name]" :name="item[name]" :tab="item[tab]" />
    </a-tabs>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useRouter} from "vue-router";

const {tab, tabList, name, activeTab, router} = defineProps({
    activeTab: String,
    router: {
        type: Boolean,
        default: false,
    },
    tabList: {
        type: Array,
        default() {
            return [];
        },
    },
    tab: {
        type: String,
        default: "title",
    },
    name: {
        type: String,
        default: "path",
    },
});

const emit = defineEmits(["onTabChange"]);

const nav = useRouter();
const chooseTab = ref(activeTab || tabList?.[0]?.[tab] || "");

const handleClick = tab => {
    chooseTab.value = tab;
    emit("onTabChange", tab);
    if (router) {
        nav.push(tab);
    }
};
</script>
<style scoped lang="less">
.tabs {
    background: #fff;

    :deep(.ant-tabs-nav) {
        margin: 0 !important;
        padding-left: 20px;
    }
}
</style>
